<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-29 
 -->


<template>
  <basicHeader :data="['系统管理','角色管理']"></basicHeader>
  <el-card>
		<el-form :inline="true" :model="form" v-if="isAuth('sys:role:save')" @keyup.enter="getDataList()">
			<el-form-item>
				<el-input v-model="form.roleName" v-if="isAuth('sys:role:delete')" placeholder="角色名称" clearable>
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
				<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
				<el-button type="danger" @click="handleDelete()">批量删除
				</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="table.tabelData.slice(( pagination.pageIndex - 1 ) * pagination.pageSize, pagination.pageIndex * pagination.pageSize )" border :height="table.tableHeight" v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
			<el-table-column type="selection" align="center" width="50" />
      <el-table-column type="index" :index="index => index + (pagination.pageIndex - 1) * pagination.pageSize + 1" align="center" width="80" label="序号"/>
			<el-table-column prop="roleName" align="center" label="角色名称" />
			<el-table-column prop="remark" align="center" label="备注" />
			<el-table-column prop="createTime" align="center" width="180" label="创建时间" />
			<el-table-column fixed="right" align="center" width="180" label="操作">
				<template #default="scope">
					<el-button size="mini" v-if="isAuth('sys:role:update')" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button>
					<el-button type="danger" v-if="isAuth('sys:role:delete')" size="mini"	@click="handleDelete(scope.row.roleId,scope.row.roleName)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
			<pagination :options="pagination" @sizeChange="size => pagination.sizeChange.call(pagination, size)" @currentChange="page => pagination.currentChange.call(pagination, page)" />
		<!-- <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> -->
	</el-card>
</template>

<script lang='js'>
  import { defineComponent, reactive, toRefs, computed, onMounted, onUnmounted } from 'vue'
  export default defineComponent({
    name: '~index',
    setup(props, {emit, slots}) {
      const state = reactive({
        form: {
          roleName: ''
        },
        table: {
          tabelData: [],
          tableHeight: ''
        },
        pagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0,
          sizeChange(newSize) {
            this.pageSize = newSize;
          },
          currentChange(newPage) {
            this.pageIndex = newPage;
          }
        }
      })
      const isAuth = computed(() => () => true);
      const getDataList = () => { }
      const addOrUpdateHandle = () => { }
      const handleDelete = () => {}
      const getTableHeight = () => {
				const tableH = 233;
				const tableHeightDetil = window.innerHeight - tableH;
				state.table.tableHeight = window.innerHeight - tableH;
			}
      getTableHeight();
      onMounted(() => {
        state.table.tabelData = new Array(100).fill({roleName: '张三', remark: '打工人打工魂', createTime: new Date().toLocaleString(), status: 1});
        state.pagination.total = 100;
        window.addEventListener('resize', getTableHeight);
      });
      onUnmounted(() => {
        window.removeEventListener('resize', getTableHeight);
      })
     return {
       isAuth,
       ...toRefs(state),
       getDataList,
       addOrUpdateHandle,
       handleDelete,
      }
     }
  })

</script>

<style lang='scss' scoped>
.el-table {
  .el-checkbox {
    height: 25px;
  }
}
</style>
